<script lang="ts" setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';

const $toast = useToast();//消息提示栏
const askQuest = ref('')
const askQuestion = () => {
  if (localStorage.getItem("patient-auth-token")) {
    const token = localStorage.getItem("patient-auth-token")
    axios.post("/api/auth/check/患者", {}, {  // 这里传递空对象作为请求体
      headers: {
        token: token  // 使用token作为请求头
      }
    }).then(res => {
      // console.log(res);
      const msg = res.data.message;
      if (res.data.success) {
        // 成功的处理逻辑
        localStorage.setItem("patient-auth-token", msg)
        const data = {
          content: askQuest.value
        }
        axios.post("/api/consult/ask", data, {
          headers: {
            token: localStorage.getItem("patient-auth-token")
          }
        }).then(res => {
          if (res.data.success) {
            $toast.open({
              message: '发送成功',
              type: 'success',
              position: "bottom-right"
            })
            getAsk()
            askQuest.value = ''
          }
        })
      }
    })
  } else {
    $toast.open({
      message: '请先登录',
      type: 'warning',
      position: "bottom-right"
    })
  }


}
const columns = [
  {
    name: 'content',
    required: true,
    label: '咨询问题',
    align: 'left',
    format: val => `${val}`,
    sortable: true,
    field:'content'
  },
  {name: 'inputTime', label: '咨询时间', field: 'inputTime', sortable: true},
  {name: 'forwardContent', align: 'center', label: '回复内容', field: 'forwardContent', sortable: true},
  {name: 'updateTime', label: '回复时间', field: 'updateTime'},
]
const getAsk = () => {
  axios.post("/api/consult/list?name=")
      .then(res => {
        rows.value = res.data.message
      })
}
const rows = ref([])
setInterval(() => {
  getAsk()
}, 3000)
onMounted(()=>{
  getAsk()
})
</script>

<template>
  <div style="display: flex;flex-direction: column;width: 99vw;height: 90vh;">
    <div class="navbar-title cursor-pointer">
      “在线牙医，一键问诊，贴心守护您的口腔健康。”
    </div>
    <div style="margin: 20px;display: flex;align-items: center;width: 100%;justify-content: space-around">
      <q-input v-model="askQuest" label="咨询内容" outlined style="width: 80%" type="textarea"/>
      <q-btn color="primary" icon-right="send" label="立即咨询" @click="askQuestion"/>
    </div>
    <hr>
    <q-table
        :columns="columns"
        :rows="rows"
        row-key="name"
        style="flex: 1"
        title="咨询历史"
    />
  </div>
</template>

<style lang="scss" scoped>
.navbar-title {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #008f8b;
}
</style>
